@extends('layout.page')
@section('title','手工发奖 - 单个发奖')
@section('stylesheet')
    <link href="/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">
    <style>
        .short {
            /*width: 150px;*/
            display: inline-block;
            text-align: center;
            padding: 5px 25px 5px 5px;
            margin: 5px;
            border-radius: 20%;
        }
    </style>
@endsection

@section('static-page')
    <div class="ibox">
        <div class="ibox-content">
            <form id="send-gift-form" method="POST" action="/ceb/handgifts/single"
                  class="wizard-big form-horizontal">
                {{csrf_field()}}
                <div class="form-group">
                    <label class="col-md-2 form-label">手机号</label>

                    <div class="col-sm-8">
                        <input id="phone" class="form-control">
                    </div>
                    <div class="col-sm-2">
                        <a class="btn btn-success" id="user-search-btn">搜索</a>
                    </div>
                    <div id="selected-user"></div>
                </div>
                <div class="form-group">
                    <label class="col-md-2 form-label">奖池名称</label>

                    <div class="col-sm-8">
                        <input id="reward-keyword" class="form-control">
                    </div>
                    <div class="col-sm-2">
                        <a class="btn btn-success" id="reward-search-btn">查询</a>
                    </div>
                </div>
                <div class="jqGrid_wrapper">
                    <table id="reward-list"></table>
                    <div id="reward-list-pager"></div>
                </div>
                <div id="selected-reward"></div>
                <button class="btn btn-success" id="submit">发放</button>
            </form>
        </div>
    </div>
@endsection
@section('modals')
    <div class="modal fade" id="reward_dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">奖池详情</h4>
                </div>
                <div class="modal-body">
                    <table class="table table-striped table-bordered table-hover">
                        <thead>
                        <th>类型</th>
                        <th>券名称</th>
                        <th>面值</th>
                        <th>起投金额</th>
                        <th>起投期限</th>
                        <th>有效期截止</th>
                        <th>有效天数</th>
                        </thead>
                        <tbody class="reward-list">

                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('javascript')

    <script src="/js/plugins/jqgrid/i18n/grid.locale-cn.js"></script>
    <script src="/js/plugins/jqgrid/jquery.jqGrid.min.js"></script>
    <script>
        $.jgrid.defaults.styleUI = 'Bootstrap';

        var select_reward_map = {};
        var jqgrid = new JqgridTable('#reward-list', {
            colNames: ['奖池名称', '奖品', '操作'],
            colModel: [
                {
                    name: 'name',
                    index: 'name',
                    width: 100,
                },
                {
                    name: 'reward',
                    index: 'reward',
                    width: 200,
                },
                {
                    name: 'action',
                    index: 'action',
                    width: 80
                }
            ],
            pager: "#reward-list-pager"
        }, '/ceb/rewardpackages/search', 'GET');
        function setTags(container, list, postName) {
            container = $(container).empty();
            $.each(list, function (k, v) {
                var s = '<div class="alert alert-success alert-dismissable short">' + v.name;
                if (postName) {
                    s += '<input type="text" name="' + postName + '[]" value="' + v.value + '" class="hidden">';
                }
                s += '<button aria-hidden="true" data-dismiss="alert" class="close" type="button" data-value="' + v.value + '">×</button>' +
                        '</div>';
                container.append(s);
            });
        }
        function resetReward() {
            var list = obj_values(select_reward_map);
            setTags('#selected-reward', list, 'rewards');

            $('#selected-reward .close').on('click', function () {
                var id = $(this).data('value').split(',')[0];
                delete select_reward_map[id];
                resetReward();
            });
        }
        $(document).ready(function () {
            $('#reward-search-btn').on('click', function () {
                var keyword = $('#reward-keyword').val();
                if (!keyword) {
                    alert('请输入关键字查询');
                    return;
                }
                jqgrid.getData({keyword: keyword}, function (l) {
                    var list = [];
                    $.each(l, function (k, v) {
                        var d = {};
                        d.name = v.name;
                        d.action = "<a class='add-reward-btn' data-id='" + v.id + "'>选择</a> | <a class='reward-detail-btn' data-id='" + v.id + "' data-items='" + JSON.stringify(v.items) + "'>查看详情</a>";
                        d.reward = '';


                        $.each(v.items.cash_voucher_list, function (k1, v1) {
                            d.reward += v1.name + ','
                        });
                        $.each(v.items.rate_increment_voucher_list, function (k1, v1) {
                            d.reward += v1.name + ','
                        });
                        $.each(v.items.red_packet_list, function (k1, v1) {
                            d.reward += v1.name + ','
                        });
                        d.reward = d.reward.substr(0, d.reward.length - 1);
                        list.push(d);
                    });
                    return list;
                }).off().on('hxop.jqgrid-show', function () {
                    $('.add-reward-btn').on('click', function () {
                        var row = $(this).parents('tr');
                        var id = $(this).data('id');
                        var behavior = $('.behavior-select', row).val();
                        if (id in select_reward_map) {
                            return;
                        }
                        var name = row.children().first().html();
                        var value = id;
                        select_reward_map[id] = {
                            name: name,
                            value: value
                        };
                        resetReward();
                    });
                    $('.reward-detail-btn').on('click',function(){
                        var items = $(this).data('items');
                        var s = getPackagesDetails(items);
                        var modal = $('#reward_dialog');
                        console.log(s);
                        $('.reward-list',modal).html(s);
                        modal.modal();
                    });
                });
            });

            $('#user-search-btn').on('click', function () {
                var phone = $('#phone').val();
                if (!Validator.is_phone(phone)) {
                    alert('请输入正确的手机号!');
                    return;
                }
                toAjax('/ceb/users/phone', {phone: phone}, 'GET').on('hxop.ajax-success', function (evt, data) {
                    var u = data.user;
                    var s = '<table class="table table-bordered text-center">' +
                            '<thead class="text-center">' +
                            '<tr>' +
                            '<th>ID</th>' +
                            '<th>手机号</th>' +
                            '<th>姓名</th>' +
                            '<th>实名认证</th>' +
                            '<th>注册时间</th>' +
                            '</thead>' +
                            '<tbody>' +
                            '<tr>' +
                            '<td><input name="user_id" type="text" readonly value="' + u.uid + '"></td>' +
                            '<td>' + u.user_phone + '</td>' +
                            '<td>' + u.real_name + '</td>' +
                            '<td>' + (u.real_name ? '是' : '否') + '</td>' +
                            '<td>' + Date.Format(u.reg_time * 1000, 'yyyy-MM-dd') + '</td>' +
                            '</tbody>' +
                            '<table>';
                    $('#selected-user').html(s);

                });
            });
            var form = $('#send-gift-form');
            $('#submit').on('click', function () {
                var dom = $('input[name=user_id]');
                if (!dom || !dom.val()) {
                    alert('请选择要发送的用户!');
                    return;
                }
                if ($('input[name*=rewards]').length == 0) {
                    alert('请选择要发送的奖励!');
                    return;
                }

                form.submit();

            });
        });
    </script>

@endsection
